<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>新增资讯</title>
    <link th:replace="~{common::common_head}">
</head>

<body class="">
<div class="wrapper">
    <div th:insert="~{common::sidebar(active='news_add.html')}"></div>
    <div class="main-panel">
        <!-- Navbar导航栏 -->
        <nav th:replace="~{common::navbar}"></nav>
        <!-- End Navbar -->
            <div class="panel-header">
                <form id="search_form" th:action="@{/patient/search}">
                    <div class="header text-center">
                        <h2 class="title">新增资讯</h2>
                        <p class="category">新增一条或多条资讯。</p>
                    </div>
                </form>
            </div>
        <div class="content">
            <div class="row">
                <div class="col-md-8 offset-2">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="title">新增资讯</h5>
                        </div>
                        <div class="card-body">

                            <form method="post" id="news_form" enctype="multipart/form-data">
                                <h2 class="text-primary" style="text-align: center;margin-bottom: 2rem" th:text="${msg}"></h2>
                                <div class="input-group input-group-lg">
                                    <input type="text" name="newsId" hidden="hidden">
                                    <input required name="newsTitle" type="text" class="form-control" placeholder="资讯标题">
                                </div>

                                <div class="input-group input-group-lg">
                                    <input required name="newsHref" type="text" class="form-control" placeholder="资讯来源链接">
                                </div>


                                <div class="input-group input-group-lg">
                                    <input required name="file" type="file" class="btn btn-info" id="select_file" onchange="onChange()" accept="image/*" hidden="hidden">
                                    <input name="newsPicture" type="text" id="select_file_tip" class="form-control btn-primary"  placeholder="选择文件..." onclick="document.getElementById('select_file').click()">
                                </div>


                                <textarea name="newsInfo" style="height: 10vmax;font-size: 14px" type="text" class="col-sm-12" placeholder="资讯简介..."></textarea>


                                <div class="row">
                                    <div class="col-md-8 offset-3">
                                        <button type="reset" class="btn-warning btn btn-lg col-4">重置</button>
                                        <input type="button" onclick="update()" class="btn-primary btn btn-lg col-4" value="添加">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{common::footer}"></div>
    </div>
</div>

<!--通用footerJs-->
<script th:replace="~{common::footerJs}"></script>

<script>
    /**
     * 选择图片时,input框显示文件名。
     */
    function onChange(){
        var filename = document.getElementById("select_file").value;
        filename = filename.split("\\");//将 \ 转义一下
        document.getElementById("select_file_tip").value= filename[filename.length-1];
    }


    /**
     * 新增资讯
     */
    function update(){
        var formData = new FormData(document.getElementById('news_form'));

        $.ajax({
            sync:false,
            url:'/admin/news/add',
            data: formData,
            method:'post',
            dataType:'text',
            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,
            success:function(result){
                if(result==='上传成功！'){
                    demo.showNotification('success',result);
                    return;
                }
                demo.showNotification('danger',result);
            }
        })

    }

</script>

</body>
</html>
